<!DOCTYPE html>
<html>
<head>
  <title>Worker pool statistics</title>
  <style>
    body {
      width: 600px;
      font: 11pt arial;
    }
  </style>

  <script src="../../dist/workerpool.js"></script>
</head>
<body>

<p>
  Create some tasks and watch the statistics
</p>

<input type="button" id="sleep2" value="Create a sleep task (2 seconds)">
<input type="button" id="sleep5" value="Create a sleep task (5 seconds)">

<pre>
  <code id="stats"></code>
</pre>

<script>
  var pool = workerpool.pool({maxWorkers: 4});

  // show current stats of the workerpool on screen
  function updateStats () {
    document.getElementById('stats').innerHTML = JSON.stringify(pool.stats(), null, 2);
  }

  setInterval(updateStats, 200);

  /**
   * A dumb task that waits for some time before resolving
   * @param {number} duration   duration in milliseconds
   * @return {Promise}
   */
  function sleep (duration) {
    return new Promise (function (resolve, reject) {
      setTimeout(resolve, duration)
    })
  }

  document.getElementById('sleep2').onclick = function () {
    console.log('start sleep(2000)');
    pool.exec(sleep, [2000])
        .then(function () {
          console.log('finished sleep(2000)');
        })
        .catch(function (err) {
          console.error(err);
        });

    updateStats();
  };

  document.getElementById('sleep5').onclick = function () {
    console.log('start sleep(5000)');
    pool.exec(sleep, [5000])
        .then(function () {
          console.log('finished sleep(5000)');
        })
        .catch(function (err) {
          console.error(err);
        });

    updateStats();
  };

</script>

</body>
</html>